<template>
  <view class="dsp-box view-page">
    <view>
      <view class="map-box">
        <!-- #ifdef H5 -->
        <image
          class="popupClose-H5"
          @click="navBack"
          :style="{
            top: navBarHeight + 'px',
          }"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/closeAiDsp.png"
        />
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <image
          class="popupClose"
          @click="navBack"
          :style="{
            top: navBarHeight + 'px',
          }"
          src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/closeAiDsp.png"
        />
        <!-- #endif -->
        <map
          ref="map"
          class="map"
          id="map"
          scale="13"
          :latitude="latitude"
          :longitude="longitude"
          :markers="markers"
          :include-points="includePoints"
          :polyline="polyline"
          @mapready="handleMapReady"
        ></map>
      </view>
    </view>
    <view class="page-content">
      <scroll-view
        :style="'height: ' + (isFormChat && isShowBuy ? 60 : 66) +'vh'"
        :scroll-into-view="intoView"
        scroll-y
        :scroll-with-animation="true"
        @scroll="onScroll"
      >
        <view class="info-view">
          <view class="info-top">
            <img
              src="../../../static/ai/icon/dsp-title.png"
              class="info-ai-img"
            />
            <view class="info-title">{{ overview.itineraryPlanTitle }}</view>
          </view>
          <view class="info-box">
            <view class="info-txt">
              <view>行程天数</view>
              <!-- <view class="active">{{ overview.totalDayNum }}</view> -->
              <view>
                <span class="active">{{ overview.totalDay }}</span>
                <span>天</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt">
              <view>游玩景点</view>
              <view>
                <span class="active">{{ overview.attraction }}</span>
                <span>个</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt">
              <view>总里程数</view>
              <view>
                <span class="active">{{ overview.totalMileage }}</span>
                <span>km</span>
              </view>
            </view>
            <view class="line"></view>
            <view class="info-txt" @click="webViewSnapshot">
              <view>下载行程</view>
              <img
                class="down"
                src="../../../static/ai/icon/down.png"
                alt=""
                srcset=""
              />
            </view>
            <!-- #ifdef H5 -->
            <!-- <view class="line"></view>
                      <view class="info-txt" @click="webViewSnapshot">
                          <view>下载行程</view>
                          <img class="down" src="https://cdn1.visiotrip.com/h5AndMini/2023-6-12/down.png" alt="" srcset="">
                      </view> -->
            <!-- #endif -->
          </view>
          <view>
            <scroll-view class="day-list" scroll-x="true">
              <!-- <view
                class="day-txt"
                :class="{ active: tabIndex == -1 }"
                @click="dayClick('', -1)"
                >总览</view
              > -->
              <view
                class="day-txt"
                :class="{ active: tabIndex == item.dayNum }"
                @click="dayClick(item, index)"
                v-for="(item, index) in infoData.dayNodeList"
                :key="index"
                >Day{{ item.dayNum }}</view
              >
            </scroll-view>
          </view>
        </view>
        <view :class="{ 'fixed-tab': showFixed }" v-show="showFixed">
          <scroll-view class="day-list" scroll-x="true">
            <view
              class="day-txt"
              :class="{ active: tabIndex == item.dayNum }"
              @click="dayClick(item, index)"
              v-for="(item, index) in infoData.dayNodeList"
              :key="index"
            >
              <view class="day-flex">
                <view class="day-content">Day{{ item.dayNum }}</view>
                <img
                  v-if="tabIndex == item.dayNum"
                  class="day-icon"
                  src="../../../static/ai/icon/tab_icon.png"
                />
              </view>
            </view>
          </scroll-view>
        </view>
        <!-- 总览去掉 -->
        <!-- <view id="general" class="detail-box">
          <view>
            <view
              class="radius-top line-box general"
              v-for="(item, index) in allDayList"
              :key="index"
            >
              <img
                class="radius-icon active"
                src="https://cdn1.visiotrip.com/h5AndMini/2023-09-14/dsp_tag_cc.png"
                alt=""
                srcset=""
              />
              <view class="day-title">{{ item.daySeq }} {{ item.destName }}</view>
              <view>
                <view class="day-content">{{ item.poiNameDisplay }}</view>
              </view>
            </view>
          </view>
          <view>
            <view class="view-box-2" v-if="overview.preparation">
              <view class="box-2-title">行前准备</view>
              <view class="box-2-content">
                <view
                  class="content-list"
                  v-for="(item, index) in overview.preparation"
                  :key="index"
                >
                  {{ index + 1 }} <text>.</text> {{ item }}
                </view>
              </view>
            </view>
            <view class="view-box-2" v-if="overview.notice">
              <view class="box-2-title">注意事项</view>
              <view class="box-2-content">
                <view
                  class="content-list"
                  v-for="(item, index) in overview.notice"
                  :key="index"
                >
                  {{ index + 1 }} <text>.</text> {{ item }}
                </view>
              </view>
            </view>
          </view>
        </view> -->
        <view
          class="view-box-1 detail-box scroll-box"
          v-for="(item, index) in infoData.dayNodeList"
          :key="index"
          :id="'intoView-' + item.dayNum"
        >
          <view class="box-title-1">
            <view class="title">Day{{ item.dayNum }} {{item.journey}}</view>
            <view class="sm-title" @click="changeOpen(index)">
              <view class="text">{{item.poiNodeList.length}}个行程点
                <text v-if="item.poiNodeList.length > 1">，里程{{item.mileage}}</text>
              </view>
              <view class="circle" style="color: #767697; font-size: 24rpx">
                {{ item.open ? "收起" : "展开"
                }}<uni-icons
                  color="#767697"
                  :type="item.open ? 'top' : 'bottom'"
                  size="12"
                ></uni-icons>
              </view>
            </view>
            <view class="box-content-2" v-if="item.summary">
              <!-- <view class="content-list" v-if="isBack == 1">{{
                item.summary
              }}</view> -->
              <getTxt :showData="item.summary" :isBack="isBack"></getTxt>
            </view>
            <!-- <view class="desc" v-if="item.summary && isBack == 1">{{item.summary}}</view> -->
          </view>
          <view v-if="item.open">
            <view
              class="line-box radius-top address-box"
              v-for="(nodeItem, nodeIndex) in item.poiNodeList"
              :key="nodeIndex"
            >
              <!-- 隐藏图片改成自定义样式 -->
              <img
                class="radius-icon"
                src="../../../static/ai/icon/dsp_tag_c.png"
                alt=""
                srcset=""
              />
              <!-- <view
              class="radius-icon">
                <view class="radius-icon-content"></view>
              </view> -->
              <view class="address-info-box">
                <!-- yuanbin20250512 暂时隐藏下面 这个 view 的点击事件  @click="toPOIDetail(nodeItem.poiId, nodeItem.poiTypeId)" ， 因为一个是这期不需要交付， 第二个是因为接口报错不显示数据 -->
                  <view class="info-title-box">
                    <view class="title">{{ nodeItem.poiName }}</view>
                    <view>
                      <view class="product-num-box">
                        <view class="product-num" style="display: flex;align-items: center;">
                          <text v-if="nodeItem.productQuantity > 0">{{ nodeItem.productQuantity }}个商品可订</text>
                          <!-- yuanbin 20250512 暂时隐藏右键图标 让用户认为不可点击 -->
                          <!-- <image
                            src="https://cdn1.visiotrip.com/h5AndMini/2024-09-19/dsp-right.png"
                            mode="scaleToFill"
                            style="width: 10rpx;height: 18rpx;margin-left: 10rpx"
                          /> -->
                        </view>
                      </view>
                    </view>
                  </view>
                <view class="info-all-box" @click="openDsp(nodeItem)">
                  <view class="text-box">
                    <view class="text-list omit1" v-if="nodeItem.dishStyle && nodeItem.dishStyle.length > 0">
                      <!-- <text v-for="(dish, dishIndex) in nodeItem.dishStyle" :key="dishIndex">
                        {{ dish }}
                      </text> -->
                      {{ nodeItem.dishStyle.join("、") }}
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.capitaConsumption">
                      <text>人均消费{{ nodeItem.capitaConsumption }}</text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.hotelType">
                      <text>{{ nodeItem.hotelType }}</text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.tags && nodeItem.tags.length > 0">
                      <text>
                        {{ nodeItem.tags.join("、") }}
                      </text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.businessHours">
                      <text class="text-name">营业时间：</text
                      ><text>{{ nodeItem.businessHours }}</text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.playTime">
                      <text class="text-name">建议游玩时间：</text
                      ><text>{{ nodeItem.playTime }}</text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.address">
                      <text class="text-name">地址：</text
                      ><text>{{ nodeItem.address }}</text>
                    </view>
                    <view class="text-list omit1" v-if="nodeItem.reason">
                      <text class="text-name">推荐理由：</text
                      ><text>{{ nodeItem.reason }}</text>
                    </view>
                  </view>
                  <view class="img-list" v-if="nodeItem.poiImgUrlList.length > 0">
                    <view
                      v-for="(imgItem, imgIndex) in nodeItem.poiImgUrlList"
                      :key="imgIndex"
                    >
                      <img
                        class="img-box"
                        v-if="imgIndex < 4"
                        :src="imgItem"
                        mode="aspectFill"
                      />
                    </view>
                  </view>
                  <view class="tips-box" v-if="nodeItem.tips.length > 0">
                    <view class="tips-title">Tips：</view>
                    <view class="tips-list">
                      <view
                        v-for="(tipsItem, tipsIndex) in nodeItem.tips"
                        :key="tipsIndex"
                      >
                      <text v-if="nodeItem.tips.length > 1">{{ tipsIndex + 1 }} <text>.</text></text>{{ tipsItem }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view
                class="distance"
                v-if="nodeIndex != item.poiNodeList.length - 1"
                >前往
                <text class="name">
                  {{ item.poiNodeList[nodeIndex + 1].poiName }}</text
                >，距离{{ nodeItem.distance }} 公里
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- #ifndef H5 -->
    <!-- yuanbin 20250506 不显示行程商品 -->
    <!-- <view class="buy-btn" @click="buy" v-if="isFormChat && isShowBuy">购买行程商品</view> -->
    <!-- yuanbin 20250506 不显示行程商品,但是下面空白部分太多，所以临时加一个返回按钮 -->
    <view class="buy-btn" @click="navBack" v-if="isFormChat && isShowBuy">返回</view>
    <!-- #endif -->
    <!-- 商场详情 -->
    <hqsPopup
      v-model="showMarket"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
    >
      <MarketDetail :round="48" :overview="marketData"></MarketDetail>
    </hqsPopup>
    <!-- 美食详情 -->
    <hqsPopup
      v-model="showRestauran"
      :height="'80vh'"
      :round="20"
      :showClose="false"
      :showHeader="false"
      @onChange="onChange"
    >
      <RestaurantDetails
        ref="restaurantDetails"
        :round="20"
        :overview="restauranData"
      ></RestaurantDetails>
    </hqsPopup>
  </view>
</template>

<script>
  const globalData = uni.getStorageSync("globalData");
import getTxt from "../components/getTxt/getTxt.vue";
import pointData from "../utils/point";
import hqsPopup from "../components/hqs-popup/hqs-popup.vue";
import MarketDetail from "../components/restaurantDetails/marketDetail.vue";
import RestaurantDetails from "../components/restaurantDetails/restaurantDetails.vue";
let observer;
export default {
  props: {},
  components: {
    getTxt,
    hqsPopup,
    MarketDetail,
    RestaurantDetails,
  },
  computed: {},
  data() {
    return {
      infoData: "",
      dayNodeList: [],
      contentTxt: "",
      timer: null,
      showText: "",
      tabIndex: 1,
      intoView: "",
      summaryTimer: null,
      itineraryPlanId: "",
      overview: "",
      allDayList: [],
      markers: [],
      // markerIcons: [
      //  '',
      //  '',
      //  '',
      //  '',
      //  '',
      //  '',
      //  '',
      //  '',
      //  '',
      //  ''
      // ], // 地图每天行程显示图标数组
      polyline: [],
      includePoints: [],
      isIOS: false, // 判断是否是ios
      longitude: "",
      latitude: "",
      windowHeight: 0,
      navBarHeight: 0,
      isBack: 0,
      isFormChat: false,
      isShowBuy: false, // 是否展示购买按钮
      parentSpm: {
        ref: "",
        pre: "",
      },
      shareData:{},
      categoriesOnScreen: new Set(),
      showFixed: false,
      markerColors: ['#7696FF', '#FFB052', '#FF9ACD', '#4ECAFF', '#2EE7CB', '#B3E075', '#90DD92', '#B799F5', '#E6A2F1', '#FF8E8E'],
      showMarket: false,
      marketData: {},
      restauranData: {},
      showRestauran: false,
      hosts: {
        preannouncement: 'https://pre-hybrid-app.visiotrip.com',
        production: 'https://hybrid-app.visiotrip.com'
      },
    };
  },
 async onLoad(options) {
  console.log('uni.getSystemInfoSync().platform',uni.getSystemInfoSync().platform)
    // 因为安卓机 地图 label不能居中， ios正常 ，所以安卓机需要单独设置偏移
    // devtools 是指微信开发者工具， 也不需要偏移
    if (uni.getSystemInfoSync().platform == 'ios' || uni.getSystemInfoSync().platform == 'devtools') {
      this.isIOS = true
    } else {
      this.isIOS = false
    }
    //获取分享参数
    let params = {
      bizId:options?.dspId,
      bizType: 6,
      destId: uni.getStorageSync("destItem").destinationId,
    };
    this.$aiRequest({
      url: "/app/share/getShareTokenByBizId",
      method: "POST",
      params,
    }).then((res) => {
        if(res.success){
            this.shareData = res.data
        }
    });

    this.getClineHeight();
    this.itineraryPlanId = options.dspId;
    this.isBack = options.isBack;
    this.isFormChat = options.isFormChat;
    this.isShowBuy = options.isShowBuy;
    await this.getInfo(this.itineraryPlanId);
    await this.getGeneral(this.itineraryPlanId);
    setTimeout(() => {
      this.createObserver();
    }, 500);
    if (this.$store.$state && this.$store.$state.parentSpm) {
      this.parentSpm = this.$store.$state.parentSpm; // 获取页面来源页信息
    }
    if (this.$store.state && this.$store.state.parentSpm) {
      this.parentSpm = this.$store.state.parentSpm; // 获取页面来源页信息
    }
  },
  watch: {
    dayNodeList: {
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
      },
      immediate: true,
    },
  },
  methods: {
    handleMapReady() {
      const amap = this.$refs.map._map;
      //修改地图样式
      amap?.setMapStyle("amap://styles/cff9e3640856b92fbba9d616003a0fd1");
      this.amap = amap;
    },
    getClineHeight() {
      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight * 1 + globalData.navTop * 1;
        },
      });
      // #ifdef H5
      this.navBarHeight = globalData.navTop * 1 + 10;
      // #endif
      // #ifndef H5
      this.navBarHeight = globalData.navHeight * 1 - 39;
      // #endif
    },
    async getInfo(id) {
      return new Promise(async(resolve,reject)=>{
        let that = this;
        let params = {
          itineraryPlanId: id,
        };
        let res = await this.$aiRequest({
          url: "/ai/aihub/trip/dayDetail",
          method: "POST",
          params,
        });
        if (res.success) {
          for (var i = 0; i < res.data.dayNodeList.length; i++) {
            res.data.dayNodeList[i].open = true;
            if (!res.data.dayNodeList[i].freeJourney) {
              let params = {
                itineraryPlanId: id,
                dayNum: res.data.dayNodeList[i].dayNum,
              };
              this.getSummary(params);
            } else {
              res.data.dayNodeList[i].summary =
                res.data.dayNodeList[i].freeContent;
            }
          }
          this.infoData = res.data;
          resolve()
        }
      })
    },
    async getSummary(params) {
      let that = this;
      let res = await this.$aiRequest({
        url: "/ai/aihub/trip/summary",
        method: "POST",
        params,
      });
      if (res.success) {
        if (!res.data.isSummary) {
          // setTimeout(() => {
          //   that.getSummary(params);
          // }, 1000);
        } else {
          for (var i = 0; i < this.infoData.dayNodeList.length; i++) {
            if (this.infoData.dayNodeList[i].dayNum == res.data.dayNum) {
              this.infoData.dayNodeList[i].summary = res.data.summary;
              this.$forceUpdate();
            }
          }
        }
      }
    },
    dayClick(item, index) {
      this.showFixed = true;
      this.$nextTick(()=>{
        this.intoView = ''
        this.intoView = `intoView-${item.dayNum}`;
        console.log(this.intoView,'\\\\\\\\\\\\---')
      })
      this.tabIndex = item.dayNum;
      this.$forceUpdate()
      if (item.dayNum < this.infoData.dayNodeList.length) {
        let pointList = this.overview.poiMapGenerateList.filter(
          (e) => e.dayNum == item.dayNum
        );
        console.log(pointList, ']]]]]]]]]]==========');
        this.setMarkers(pointList);
      }
    },
    changeOpen(index) {
      this.infoData.dayNodeList[index].open =
        !this.infoData.dayNodeList[index].open;
      this.$forceUpdate();
    },
    setMarkers(pointList) {
      let markers = [];
      let pointsList = [];
      let latitudeArr = [];
      let longitudeArr = [];
      this.latitude = pointList[0].latitude;
      this.longitude = pointList[0].longitude;
      pointList.forEach((p, i) => {
        latitudeArr.push(p.latitude);
        longitudeArr.push(p.longitude);
        pointsList.push({
          latitude: p.latitude,
          longitude: p.longitude,
        });
        markers.push(
          Object.assign(
            {},
            {
              id: i,
              // iconPath:
              //   `https://cdn1.visiotrip.com/h5AndMini/2024-04-19/poiIcon-${p.dayNum}.png`,
              // iconPath: this.markerIcons[p.dayNum - 1], // TODO:阿坝项目图标都用同一个颜色
              iconPath: `../../../static/ai/icon/poiIcon-${p.dayNum}.png`,
              width: 32,
              height: 32,
              joinCluster: false, // 指定了该参数才会参与聚合
              latitude: p.latitude,
              longitude: p.longitude,
              label: {
                bgColor: "#FFFFFF",
                content: `${p.poiName}`,
                // color: this.markerColors[p.dayNum-1],
                textAlign: "center",
                borderColor: "#FFFFFF",
                color: '#AA5413', // TODO: 阿坝项目图标都用同一个颜色
                padding: 4,
                borderWidth: 0,
								fontSize: 12,
                anchorX: this.isIOS? 0:(-(0.5 * (p.poiName.length * 12)) - 2), // 安卓机需要单独设置偏移（估计是兼容问题）
              },
            },
            p
          )
        );
      });
      this.markers = markers;
      // this.includePoints = [
      //   {
      //     latitude: this.getMin(latitudeArr) - 0.009,
      //     longitude: this.getMin(longitudeArr) - 0.009,
      //   },
      //   {
      //     latitude: this.getMax(latitudeArr) + 0.009,
      //     longitude: this.getMax(longitudeArr) + 0.009,
      //   },
      // ];
    },
    //获取总览
    async getGeneral(id) {
      return new Promise(async(resolve,reject)=>{
        let params = {
          itineraryPlanId: id,
        };
        let res = await this.$aiRequest({
          url: "/ai/aihub/trip/overview",
          method: "POST",
          params,
        });
        if (res.success) {
          this.overview = res.data;
          this.allDayList = res.data.dayNodeList;
          let pointList = this.overview.poiMapGenerateList.filter(
            (item) => item.dayNum == 1
          );
          console.log('pointList', pointList);
          this.setMarkers(pointList);
          resolve()
        }
      })

    },
    getMax(arr) {
      var max = arr[0];
      for (var i = 1; i < arr.length; i++) {
        var cur = arr[i];
        cur > max ? (max = cur) : null;
      }
      return max * 1;
    },
    getMin(arr) {
      var min = arr[0];

      for (var i = 1; i < arr.length; i++) {
        var cur = arr[i];
        cur < min ? (min = cur) : null;
      }
      return min * 1;
    },
    async webViewSnapshot() {
      // #ifndef H5
      try {
        console.log(this.hosts[process.env.NODE_ENV])
        let host = this.hosts[process.env.NODE_ENV] 

                // let url =  encodeURIComponent(`${host}/#/ai/pages/aiDSPDetail/aiDSPDetail?dspId=${itineraryPlanId}`)

        let pageUrl = `${host}/#/ai/pages/aiDSPDetail/aiDSPDetail?dspId=${this.itineraryPlanId}`

        const url = "/screenshotTo";
        uni.showLoading({
          title: "下载中",
          mask: true,
        });
        let res = await this.$aiRequest({
          url,
          method: "POST",
          serverType: "download",
          params: {
            // dspId: this.itineraryPlanId,
            url: pageUrl
          },
        });
        console.log(res);
        // if (res.resultCode === 0) {
        console.log("成功", res);
        this.base64 = res;
        // this.base64 = "data:image/png;base64,"+ uni.arrayBufferToBase64(res)
        this.savePoster();
        // } else {
        //     uni.hideLoading();
        // }
      } catch (e) {
        uni.hideLoading();
      }
      // #endif
      // #ifdef H5
      this.$bridge.webViewSnapshot();
      // #endif
    },
    savePoster() {
      uni.getSetting({
        //获取用户的当前设置
        success: (res) => {
          if (res.authSetting["scope.writePhotosAlbum"]) {
            //验证用户是否授权可以访问相册
            this.saveImageToPhotosAlbum();
          } else {
            uni.authorize({
              //如果没有授权，向用户发起请求
              scope: "scope.writePhotosAlbum",
              success: () => {
                this.saveImageToPhotosAlbum();
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "请打开保存相册权限，再点击保存相册分享",
                  icon: "none",
                  duration: 3000,
                });
                setTimeout(() => {
                  uni.openSetting({
                    //调起客户端小程序设置界面,让用户开启访问相册
                    success: (res2) => {
                      // console.log(res2.authSetting)
                    },
                  });
                }, 3000);
              },
            });
          }
        },
      });
    },
    saveImageToPhotosAlbum() {
      let base64 = this.base64.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
      let filePath = wx.env.USER_DATA_PATH + "/ph_fit_qrcode.png";
      uni.showLoading({
        title: "下载中",
        mask: true,
      });
      uni.getFileSystemManager().writeFile({
        filePath: filePath, //创建一个临时文件名
        data: base64, //写入的文本或二进制数据
        encoding: "base64", //写入当前文件的字符编码
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function (res) {
              uni.hideLoading();
              uni.showToast({
                title: "保存相册成功",
                icon: "none",
                duration: 5000,
              });
            },
            fail: function (err) {
              uni.hideLoading();
              // console.log(err.errMsg);
            },
          });
        },
        fail: (err) => {
          uni.hideLoading();
          //console.log(err)
        },
      });
    },
    openDsp(item) {
      if (item.productQuantity > 0) {
        this.$productUrlJump(item, true);
      }
      console.log(item);
    },
    navBack() {
      // #ifdef H5
      if (!this.isBack) {
        this.$bridge.navigateDismissBack();
      } else {
        this.$navBack();
      }
      // #endif
      // #ifndef H5
      this.$navBack();
      // #endif
    },
    onScroll(e) {
      this.intoView = ''      
      if (e.detail.scrollTop > 122) {
        this.showFixed = true;
      } else {
        this.showFixed = false;
      }
    },
    leftIndexOfId(id) {
      for (let i = 0; i < this.infoData.dayNodeList.length; i++) {
        const dayNum = this.infoData.dayNodeList[i].dayNum * 1;
        if (dayNum == id) {
          return dayNum;
        }
      }
    },
    createObserver() {
      console.log("添加监控");
      if (observer) {
        observer.disconnect();
        observer = undefined;
      }
      observer = uni
        .createIntersectionObserver(this, {
          observeAll: true,
          thresholds: [0, 0.001],
        })
        .relativeTo(".page-content", { top: -180 })
        .observe(".scroll-box", (res) => {
          const { intersectionRatio, id } = res;
          const categoryTabIndex = id.split("-")[1] * 1
          // const categoryTabIndex = this.leftIndexOfId(id.split("-")[1] * 1);
          if (intersectionRatio > 0) {
            this.categoriesOnScreen.add(categoryTabIndex);
          } else {
            this.categoriesOnScreen.delete(categoryTabIndex);
          }
          // categoriesOnScreen保存的是右边显示的所有类目的下标，其中最小的下标就应该是左边选中的下标
          let min = Math.min(...this.categoriesOnScreen);
          console.log("min", min, res,"==========",  this.categoriesOnScreen);
          if (!isFinite(min)) {
            min = this.infoData.dayNodeList.length + 1;
            this.tabIndex = min;
            return;
          } else {
            this.tabIndex = min;
            if(this.tabIndex > this.infoData.dayNodeList.length) return
            let pointList = this.overview.poiMapGenerateList.filter(
              (e) => e.dayNum == min
            );
            this.setMarkers(pointList);
          }
        });
    },
    //获取餐厅详情
    async getRestaurantDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryRestaurantDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        this.showRestauran = !this.showRestauran;
        this.restauranData = res.data;
        this.$refs.restaurantDetails.getRecList(res.data);
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    //获取商场详情
    async getMarketDetail(item) {
      let res = await this.$aiRequest({
        url: `/ai/aihub/chat/queryMarketDetail/${item.poiId}`,
        method: "GET",
      });
      if (res.success) {
        this.showMarket = !this.showMarket;
        this.marketData = res.data;
      } else {
        uni.showToast({
          title: res.errMsg,
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 跳转到POI
    toPOIDetail(poiId, poiTypeId) {
      // #ifndef H5
      // 餐馆
      if (poiTypeId == 2) {
        this.getRestaurantDetail({poiId})
      } else if (poiTypeId == 8) {
        this.getMarketDetail({poiId})
      } else {
        uni.navigateTo({
          url: '/ai/pages/POIDetail/index?poiId=' + poiId
        })
      }
      // #endif
    },
    // 回到chat页面且问出行程商品卡片
    buy() {
      uni.navigateTo({
        url:'/ai/pages/index'
      })
      uni.setStorageSync('isFromDspDetail', this.infoData.itineraryPlanId)
    },
    /**
     * 发送事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    postEventData(eventId, eventType, spmCntSuffix, obj) {
      this.$spmFun(
        pointData,
        this.getEventObj(eventId, eventType, spmCntSuffix, obj)
      );
    },
    /**
     * 获取事件数据
     * @param {*} eventId 事件ID
     * @param {*} eventType 事件名
     * @param {*} spmCntSuffix 点位
     * @param {*} obj 业务参数
     */
    getEventObj(eventId, eventType, spmCntSuffix, obj) {
      return {
        event_id: eventId,
        event_type: eventType,
        spm_cnt: `${pointData.platform}.aiDSPDetail.${spmCntSuffix}`,
        spm_pre: this.parentSpm.pre,
        spm_ref: this.parentSpm.ref,
        open_time: new Date().getTime(),
        args: {
          ...this.destItem,
        },
      };
    },
  },
  onShow() {
    //	#ifdef H5
    const dsbridges = require("@/utils/dsbridge.js");
    let getAppSpmParam = JSON.parse(dsbridges.getAppSpmParam());
    if (getCurrentPages().length == 1) {
      this.parentSpm = {
        ref: getAppSpmParam.events[0].spm_cnt, //上级页面点击位置
        pre: getAppSpmParam.events[0].spm_ref, //上上级点击位置
      };
    }
    let spmData = this.getEventObj("2003", "页面离开", "0.0");
    this.$store.commit("SET_POINT_DATA", pointData);
    this.$store.commit("SET_SPM_DATA", spmData);
    //	#endif
    this.postEventData("2002", "页面进入", "0.0");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.postEventData("2003", "页面离开", "0.0");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.postEventData("2003", "页面离开", "0.0");
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return this.$shareFun(this.shareData,`${this.infoData.itineraryPlanTitle}`)
  },
};
</script>

<style lang="scss" scoped>
.dsp-box {
  background: #F6F8FF;
}
.page-content {
  margin-top: -124rpx;
  background: rgba(249, 250, 245, 1);
  border-radius: 75rpx 75rpx 0rpx 0rpx;
  overflow: hidden;
}
// 行程弹框详情开始
.detail-box {
  width: 690rpx;
  margin: 0 auto;
}
.info-view {
  width: 100%;
  background: rgba(249, 250, 245, 1);
  // // height: 244rpx;
  // background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-04-19/dsp-title-back.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.info-top {
  display: flex;
  align-items: center;
  padding: 38rpx 32rpx 8rpx 32rpx;
  border-radius: 48rpx 48rpx 0rpx 0rpx;
  .info-ai-img {
    margin-right: 31rpx;
    width: 134rpx;
    height: 34rpx;
  }
  .info-title {
    font-weight: 600;
    font-size: 32rpx;
    color: #131328;
    line-height: 32rpx;
  }
}
.info-box {
  width: 690rpx;
  height: 107rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(181, 181, 210, 0.1);
  border: 1rpx solid rgba(170, 84, 19, 0.40);
  border-radius: 26rpx;
  margin: 30rpx auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .line {
    width: 1rpx;
    height: 57rpx;
    // border: 1rpx solid #BEBEBE;
    background: #e4e4f4;
  }

  .info-txt {
    flex: 1;
    text-align: center;

    view {
      color: $sl-color-light-grey;
      font-size: 24rpx;
    }

    .down {
      width: 28rpx;
      height: 28rpx;
    }

    .active {
      font-size: 36rpx;
      color: $sl-color-dark-grey1;
      font-weight: 600;
      margin-right: 4rpx;
    }
  }
}

.day-list {
  white-space: nowrap;
  width: calc(100% - 60rpx);
  height: 96rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(181,181,210,0.1);
  border-radius: 26rpx;
  margin: 0 30rpx 0 30rpx;
  .day-txt {
    display: inline-block;
    line-height: 96rpx;
    color: $sl-color-light-grey;
    font-size: 28rpx;
    width: 150rpx;
    text-align: center;
  }

  .day-txt.active {
    font-size: 36rpx;
    color: $sl-color-black;
    font-weight: 600;
  }
}

.general {
  position: relative;
  padding: 0 30rpx 40rpx 40rpx;

  .day-title {
    font-size: 32rpx;
    color: $sl-color-black;
    font-weight: 600;
    padding-bottom: 20rpx;
  }

  .day-content {
    font-size: 28rpx;
    color: $sl-color-grey;
    padding-bottom: 16rpx;
  }
}

.view-box-1 {
  position: relative;

  .box-title-1 {
    font-size: 32rpx;
    color: $sl-color-black;
    padding: 32rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-weight: 600;
    }
    .sm-title {
      display: flex;
      justify-content: space-between;
      margin-top: 32rpx;
      .text {
        font-size: 28rpx;
        color: #767697;
        line-height: 40rpx;
        letter-spacing: 1px;
      }
      .circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 97rpx;
        height: 38rpx;
        border-radius: 20rpx;
        border: 1rpx solid #767697;
        line-height: 38rpx;
      }
    }
    .desc {
      width: 100%;
      // height: 156rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      font-size: 28rpx;
      color: #131328;
      line-height: 40rpx;
      letter-spacing: 1px;
      padding: 18rpx 30rpx;
      margin-top: 32rpx;
    }
  }

  .day-content {
    font-size: 28rpx;
    color: #848891;
    padding-bottom: 16rpx;
  }
}

.address-box {
  position: relative;
  padding-left: 38rpx;

  .address-info-box {
    width: 652rpx;
    background: rgba(224, 245, 235, 1);
    border-radius: 10rpx;
    margin: 0 auto;
    padding-bottom: 30rpx;
    
      .info-title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        background: linear-gradient( 270deg, #92BAA8 0%, #1B9C61 100%);
        border-radius: 16rpx 16rpx 0rpx 0rpx;

        .title {
          font-size: 32rpx;
          color: #ffffff;
          font-weight: 600;
          line-height: 32rpx;
        }

        .product-num-box {
          position: relative;

          .product-num {
            right: 0;
            z-index: 1;
            font-size: 28rpx;
            color: #ffffff;
            text-align: center;
            font-weight: 600;
          }

          .brg-1 {
            width: 159rpx;
            height: 32rpx;
            position: absolute;
            right: 0;
            z-index: 0;
          }
        }
      }
    .info-all-box {
      padding: 26rpx 10rpx 0 30rpx;


      .text-box {
        .text-list {
          padding: 5rpx 0;

          text {
            font-size: 28rpx;
            color: $sl-color-black;
            line-height: 40rpx;
          }

          text.text-name {
            font-size: 28rpx;
            color: $sl-color-grey;
          }
        }
      }

      .img-list {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 20rpx;

        .img-box {
          width: 130rpx;
          height: 130rpx;
          margin-right: 20rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }

      .tips-box {
        display: flex;
        padding-top: 30rpx;

        .tips-title {
          font-size: 28rpx;
          color: $sl-color-grey;
        }

        .tips-list {
          flex: 1;
          display: flex;
          justify-content: flex-start;
          // flex-wrap: wrap;
          flex-direction: column;
          view {
            padding: 0 20rpx 10rpx 0;
            font-size: 28rpx;
            color: $sl-color-black;
            margin-right: 8rpx;
          }
        }
      }
    }
  }

  .distance {
    padding: 32rpx 0;
    color: $sl-color-grey;
    font-size: 28rpx;
    line-height: 40rpx;
    width: 652rpx;
    margin: 0 auto;

    .name {
      font-size: 28rpx;
      color: $sl-color-grey;
      // font-weight: 600;
      padding: 0 5rpx;
    }
  }
}

.box-content-2 {
  width: calc(100% - 60rpx);
  // height: 156rpx;
  background: rgba(238, 240, 223, 1);
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #131328;
  line-height: 40rpx;
  letter-spacing: 1px;
  padding: 18rpx 30rpx;
  margin-top: 32rpx;
}

.view-box-2 {
  padding: 0 30rpx 40rpx 30rpx;

  .box-2-title {
    font-size: 28rpx;
    color: $sl-color-grey;
    font-weight: 600;
    padding-bottom: 20rpx;
  }

  .box-2-content {
    background: rgba(229, 235, 255, 0.5);
    width: 100%;
    padding: 13rpx 30rpx;

    .content-list {
      font-size: 28rpx;
      color: $sl-color-grey;
      margin: 5rpx 0;
    }
  }
}

.map-box {
  position: relative;
  width: 100%;
  height: 600rpx;

  .popupClose {
    position: fixed;
    width: 48rpx;
    height: 48rpx;
    left: 30rpx;
    z-index: 11;
  }
  .popupClose-H5 {
    position: fixed;
    width: 48rpx;
    height: 48rpx;
    right: 30rpx;
    z-index: 11;
  }
  .map {
    width: 100%;
    height: 35vh;
  }
}
.radius-top {
  position: relative;

  .radius-icon {
    position: absolute;
    z-index: 2;
    left: 3rpx;
    // border-radius: 13rpx;
    // background: rgba(170, 84, 19, 0.3);
    width: 26rpx;
    height: 26rpx;
    // padding: 7rpx;
    // .radius-icon-content{
    //   width: 12rpx;
    //   height: 12rpx;
    //   border-radius: 6rpx;
    //   background: rgba(170, 84, 19, 1);
    // }
  }
  .radius-icon.active {
    width: 14rpx;
    height: 14rpx;
    left: 8rpx;
  }
}

.line-box::after {
  content: "";
  width: 1rpx;
  height: 100%;
  position: absolute;
  left: 14rpx;
  top: 0rpx;
  border-left: 2rpx dashed #d8d8d8;
  // background: #d8d8d8;
  z-index: 1;
}

// 行程弹框详情结束
::v-deep .uni-page-wrapper {
  height: auto;
}
.buy-btn {
  position: fixed;
  bottom: 60rpx;
  width: 710rpx;
  height: 88rpx;
  border-radius: 46rpx;
  background: rgba(27, 156, 97, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
  line-height: 88rpx;
  text-align: center;
  left: 50%;
  margin-left: -355rpx;
  z-index: 99;
}
.fixed-tab {
  width: 100%;
  position: fixed;
  top: 476rpx;
  z-index: 111;
  border-radius: 48rpx 48rpx 0 0;
  .day-list {
    white-space: nowrap;
    width: 100%;
    height: 104rpx;
    background: #f6f8ff;
    border-radius: 48rpx 48rpx 0 0;
    margin: 0;
    .day-txt {
      display: inline-block;
      color: $sl-color-grey;
      font-size: 28rpx;
      width: 150rpx;
      text-align: center;
      height: 104rpx;
      .day-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        height: 104rpx;
        .day-icon {
          width: 46rpx;
          height: 14rpx;
          position: absolute;
          left: 50%;
          margin-left: -23rpx;
          bottom: 12rpx;
        }
      }
    }

    .day-txt.active {
      font-size: 36rpx;
      color: $sl-color-black;
      font-weight: 600;
    }
  }
}
</style>
